
<template>
  <div class="tab-bar" :style="containerStyle" v-if="shouldShowTabbar">
    <!-- 有数据时的底部导航 -->
    <div v-if="data.items && data.items.length" class="tabbar">
      <el-menu
        :default-active="activeIndex"
        :background-color="data.backgroundColor || pageConfig.tabbarColor || '#ffffff'"
        :text-color="data.inactiveColor || pageConfig.tabbarTextColor || '#909399'"
        :active-text-color="data.activeColor || '#409eff'"
        mode="horizontal"
        :border="data.isShowBorder"
        class="tabbar-menu"
      >
        <el-menu-item
          v-for="(item, index) in data.items"
          :key="index"
          :index="String(index)"
          :class="{ 'is-dot': item.isDot }"
          @click="handleItemClick(item, index)"
        >
          <!-- 图标 -->
          <el-icon class="tabbar-icon">
            <img 
              :src="activeIndex === String(index) ? item.activeIcon : item.inactiveIcon" 
              :alt="item.text"
            />
          </el-icon>

          <!-- 文字 -->
          <span class="tabbar-text">{{ item.text }}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 默认底部导航 -->
    <div v-else class="tabbar">
      <el-menu
        :default-active="activeIndex"
        :background-color="data.backgroundColor || pageConfig.tabbarColor || '#ffffff'"
        :text-color="data.inactiveColor || pageConfig.tabbarTextColor || '#909399'"
        :active-text-color="data.activeColor || '#409eff'"
        mode="horizontal"
        :border="data.isShowBorder"
        class="tabbar-menu"
      >
        <el-menu-item index="0" @click="handleDefaultClick(0)">
          <el-icon class="tabbar-icon">
            <component :is="defaultIcons[0]" />
          </el-icon>
          <span class="tabbar-text">首页</span>
        </el-menu-item>

        <el-menu-item index="1" @click="handleDefaultClick(1)">
          <el-icon class="tabbar-icon">
            <component :is="defaultIcons[1]" />
          </el-icon>
          <span class="tabbar-text">分类</span>
        </el-menu-item>

        <el-menu-item index="2" @click="handleDefaultClick(2)">
          <el-icon class="tabbar-icon">
            <component :is="defaultIcons[2]" />
          </el-icon>
          <span class="tabbar-text">购物车</span>
        </el-menu-item>

        <el-menu-item index="3" @click="handleDefaultClick(3)">
          <el-icon class="tabbar-icon">
            <component :is="defaultIcons[3]" />
          </el-icon>
          <span class="tabbar-text">我的</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, getCurrentInstance } from 'vue'
import { House, Goods, ShoppingCart, User } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  },
  pageConfig: {
    type: Object,
    default: () => ({
      showTabbar: true,
      tabbarColor: '#ffffff',
      tabbarTextColor: '#909399'
    })
  }
})

// 定义事件
const emit = defineEmits(['item-click'])

// 使用传入的页面配置或默认配置
const pageConfig = computed(() => props.pageConfig || {
  showTabbar: true,
  tabbarColor: '#ffffff',
  tabbarTextColor: '#909399'
})

// 计算是否显示底部导航
const shouldShowTabbar = computed(() => pageConfig.showTabbar !== false)

// 当前激活的索引
const activeIndex = ref('0')

// 默认图标
const defaultIcons = computed(() => [
  House,
  Goods,
  ShoppingCart,
  User
])

// TabBar位置
const tabBarPosition = ref('0px')

// 计算容器样式
const containerStyle = computed(() => {
  return {
    position: 'absolute',
    bottom: tabBarPosition.value,
    left: '0px',
    width: '100%',
    zIndex: 1000,
    backgroundColor: pageConfig.value.tabbarColor || '#ffffff',
    boxShadow: '0 -2px 10px rgba(0, 0, 0, 0.1)',
    height: '54px'
  }
})

// 监听内容高度变化，调整TabBar位置
const adjustTabBarPosition = () => {
  const phoneScreen = document.querySelector('.phone-screen')
  const pageContent = document.querySelector('.page-content')
  
  if (phoneScreen && pageContent) {
    const screenHeight = phoneScreen.offsetHeight
    const contentHeight = pageContent.offsetHeight
    const tabBarHeight = 54 // TabBar高度
    const headerHeight = 60 // 头部高度
    const minHeight = 607 // 667px - 60px (header height)
    
    // 如果内容高度小于最小高度，TabBar固定在底部
    // 如果内容高度大于最小高度，TabBar跟随内容
    if (contentHeight < minHeight) {
      tabBarPosition.value = '0px'
    } else {
      // TabBar跟随内容，不固定在底部
      tabBarPosition.value = '-54px'
    }
  }
}

// 生命周期钩子
onMounted(() => {
  // 确保组件实例是活跃的
  if (getCurrentInstance()) {
    // 监听内容高度变化
    nextTick(() => {
    adjustTabBarPosition()
  })
  
    // 监听窗口大小变化
    window.addEventListener('resize', adjustTabBarPosition)
  }
})

onUnmounted(() => {
  // 清理工作
  window.removeEventListener('resize', adjustTabBarPosition)
})

// 暴露更新TabBar位置的方法
defineExpose({
  updatePosition: () => {
    adjustTabBarPosition()
  }
})

// 事件处理
function handleItemClick(item, index) {
  activeIndex.value = String(index)
  emit('item-click', item, index)
}

function handleDefaultClick(index) {
  activeIndex.value = String(index)
  emit('item-click', { type: 'default', index }, index)
}

// 生命周期钩子已在上方定义，此处删除重复代码
</script>

<style lang="scss" scoped>
.tab-bar {
  width: 100%;
  box-sizing: border-box;

  .tabbar {
    width: 100%;
    height: 100%;
    overflow-x: auto; /* 允许水平滚动 */
    overflow-y: hidden; /* 防止垂直溢出 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */

    .tabbar-menu {
      display: flex;
      width: 100%;
      height: 100%;
      border-top: 1px solid #eee;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      
      :deep(.el-menu) {
        display: flex;
        width: 100%;
        height: 100%;
        border-bottom: none;
      }
      
      :deep(.el-menu-item) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 54px;
        padding: 0;
        line-height: 1;
        min-width: 0; /* 防止内容溢出 */
        flex: 1; /* 让每个导航项平均分配空间 */
        overflow: hidden; /* 防止内容溢出 */

        &.is-active {
          background-color: transparent;
          color: var(--el-menu-active-color);
        }

        &.is-dot {
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: 8px;
            right: 50%;
            transform: translateX(16px);
            width: 8px;
            height: 8px;
            background-color: #f56c6c;
            border-radius: 50%;
          }
        }

        .tabbar-icon {
          margin-bottom: 4px;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .tabbar-text {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
